theme: Use box shadow for active panel menu border

diff --git a/data/theme/_common.scss b/data/theme/_common.scss
index a73fbbd8ffac4d09c97d06e562df91e72a5a8032..d45bca20485aadacec615770452020a9ca10cf96 100644 (file)
--- a/data/theme/_common.scss
+++ b/data/theme/_common.scss
@@ -242,8 +242,7 @@ StScrollBar {
   &.unlock-screen,
   &.login-screen,
   &.lock-screen {
-    background-color: transparent;
-    
+    background-color: transparent;    
   }
 
   #panelLeft, #panelCenter { // spacing between activities<>app menu and such
@@ -270,7 +269,7 @@ StScrollBar {
     font-weight: bold;
     color: #ccc;
     transition-duration: 100ms;
-    padding: 2px;
+
     #appMenuIcon { 
       app-icon-bottom-clip: 1px;
       
@@ -288,9 +287,10 @@ StScrollBar {
     }
     
     &:active, &:overview, &:focus, &:checked {
-      border-color: lighten($selected_bg_color,5%);
-      border-bottom-width: 2px;
-      padding: 2px 2px 0 2px;
+      // Trick due to St limitations. It needs a background to draw
+      // a box-shadow
+      background-color: rgba(0, 0, 0, 0.01);
+      box-shadow: inset 0 -2px 0px lighten($selected_bg_color,5%);
       color: lighten($fg_color,10%);
       text-shadow: black 0px 2px 2px;
       

diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index f79ebd0b2a2aadb57df48accb42faa57171b4c0a..e402ed33c87a9e9a1830e812c2f6eaebc5144788 100644 (file)
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -1205,8 +1205,7 @@ StScrollBar {
     -minimum-hpadding: 6px;
     font-weight: bold;
     color: #ccc;
-    transition-duration: 100ms;
-    padding: 2px; }
+    transition-duration: 100ms; }
     #panel .panel-button #appMenuIcon {
       app-icon-bottom-clip: 1px; }
       .panel-button:active #panel .panel-button #appMenuIcon, .panel-button:overview #panel .panel-button #appMenuIcon, .panel-button:focus #panel .panel-button #appMenuIcon, .panel-button:checked #panel .panel-button #appMenuIcon {
@@ -1215,9 +1214,8 @@ StScrollBar {
       color: white;
       text-shadow: black 0 2px 2px; }
     #panel .panel-button:active, #panel .panel-button:overview, #panel .panel-button:focus, #panel .panel-button:checked {
-      border-color: #256ab1;
-      border-bottom-width: 2px;
-      padding: 2px 2px 0 2px;
+      background-color: rgba(0, 0, 0, 0.01);
+      box-shadow: inset 0 -2px 0px #256ab1;
       color: white;
       text-shadow: black 0px 2px 2px; }
       #panel .panel-button:active > .system-status-icon, #panel .panel-button:overview > .system-status-icon, #panel .panel-button:focus > .system-status-icon, #panel .panel-button:checked > .system-status-icon {